<template>
  <div class="store-management">
    <!-- 操作按钮 -->
    <el-button type="primary" icon="el-icon-plus" class="add-btn" @click="openAddDialog">新增门店</el-button>

    <!-- 门店信息表格 -->
    <el-table :data="paginatedStores" style="width: 100%" stripe border>
      <el-table-column label="编号" prop="id" width="120" align="center" />
      <el-table-column label="门店名称" prop="name" width="180" />
      <el-table-column label="地址" prop="address" width="300" />
      <el-table-column label="价格" prop="price" width="120" />
      <el-table-column label="电话" prop="phone" width="180" />
      <el-table-column label="门店二维码" prop="qrCode" width="200">
        <template #default="scope">
          <img :src="scope.row.qrCode" alt="二维码" class="qr-image" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteStore(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控制和每页条数选择 -->
    <div class="pagination-wrapper">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="stores.length"
          layout="total, prev, pager, next, jumper"
          @current-change="handlePageChange"
          class="pagination"
      />
      <el-select v-model="pageSize" class="page-size-select" @change="handlePageSizeChange" placeholder="每页显示条数">
        <el-option label="3条" :value="3"></el-option>
        <el-option label="5条" :value="5"></el-option>
        <el-option label="10条" :value="10"></el-option>
        <el-option label="20条" :value="20"></el-option>
      </el-select>
    </div>

    <!-- 新增/编辑门店弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" class="dialog-box">
      <el-form :model="currentStore" :rules="rules" ref="storeForm" label-width="80px">
        <el-form-item label="编号" prop="id">
          <el-input v-model="currentStore.id" placeholder="请输入编号" readonly />
        </el-form-item>
        <el-form-item label="门店名称" prop="name">
          <el-input v-model="currentStore.name" placeholder="请输入门店名称" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="currentStore.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="currentStore.price" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="currentStore.phone" placeholder="请输入联系电话" />
        </el-form-item>

        <!-- 门店二维码上传 -->
        <el-form-item label="门店二维码" prop="qrCode">
          <el-upload
              action="/upload" <!-- 这里需要填入你的上传接口 -->
          list-type="picture-card"
          :on-success="handleUploadSuccess"
          :before-upload="beforeUpload"
          :file-list="currentStore.qrCode ? [{ name: '二维码', url: currentStore.qrCode }] : []"
          >
          <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="cancel-btn">取消</el-button>
        <el-button type="primary" @click="saveStore" class="confirm-btn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假数据
      stores: [
        { id: 1, name: '台球厅A', address: '北京市朝阳区A', price: '200元/小时', phone: '13800000000', qrCode: 'https://www.example.com/qrA.png' },
        { id: 2, name: '台球厅B', address: '上海市浦东新区B', price: '250元/小时', phone: '13800000001', qrCode: 'https://www.example.com/qrB.png' },
        { id: 3, name: '台球厅C', address: '广州市天河区C', price: '300元/小时', phone: '13800000002', qrCode: 'https://www.example.com/qrC.png' },
        { id: 4, name: '台球厅D', address: '深圳市南山区D', price: '180元/小时', phone: '13800000003', qrCode: 'https://www.example.com/qrD.png' },
        { id: 5, name: '台球厅E', address: '武汉市武昌区E', price: '220元/小时', phone: '13800000004', qrCode: 'https://www.example.com/qrE.png' },
        { id: 6, name: '台球厅F', address: '天津市和平区F', price: '200元/小时', phone: '13800000005', qrCode: 'https://www.example.com/qrF.png' },
        { id: 7, name: '台球厅G', address: '重庆市渝中区G', price: '230元/小时', phone: '13800000006', qrCode: 'https://www.example.com/qrG.png' }
      ],
      currentPage: 1,  // 当前页
      pageSize: 3,     // 每页显示的数据条数
      currentStore: {
        id: null,
        name: '',
        address: '',
        price: '',
        phone: '',
        qrCode: ''
      }, // 当前操作的门店
      dialogVisible: false, // 控制弹窗显示/隐藏
      dialogTitle: '新增门店', // 弹窗标题
      rules: {
        name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        qrCode: [{ required: true, message: '请输入二维码链接', trigger: 'blur' }]
      }
    };
  },
  computed: {
    paginatedStores() {
      // 基于当前页和每页条数返回分页数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.stores.slice(start, end);
    }
  },
  methods: {
    openAddDialog() {
      this.currentStore = { id: null, name: '', address: '', price: '', phone: '', qrCode: '' };
      this.dialogTitle = '新增门店';
      this.dialogVisible = true;
    },
    openEditDialog(store) {
      this.currentStore = { ...store };
      this.dialogTitle = '编辑门店';
      this.dialogVisible = true;
    },
    saveStore() {
      this.$refs.storeForm.validate((valid) => {
        if (valid) {
          if (this.currentStore.id) {
            const index = this.stores.findIndex(store => store.id === this.currentStore.id);
            this.$set(this.stores, index, this.currentStore);
          } else {
            this.currentStore.id = this.stores.length + 1;
            this.stores.push(this.currentStore);
          }
          this.dialogVisible = false;
          this.$message.success(`${this.dialogTitle === '新增门店' ? '新增' : '编辑'}成功`);
        }
      });
    },
    deleteStore(store) {
      this.$confirm('确认删除该门店吗?', '删除门店', { type: 'warning' }).then(() => {
        this.stores = this.stores.filter(item => item.id !== store.id);
        this.$message.success('删除成功');
      }).catch(() => {});
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handlePageSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;  // 重置回第一页
    },
    handleUploadSuccess(response, file, fileList) {
      // 设置上传成功后二维码的URL
      this.currentStore.qrCode = response.url;  // 假设返回的数据中包含图片的URL
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        this.$message.error('只能上传图片文件');
      }
      return isImage;
    }
  }
};
</script>

<style scoped>
.store-management {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.add-btn {
  margin-left: 0;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #409EFF;
  color: white;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.add-btn:hover {
  background-color: #66b1ff;
}

.page-size-select {
  margin-left: 10px;
  width: 150px;
}

.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.el-table {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-table .cell {
  text-align: center;
}

.el-table .el-button {
  color: #409EFF;
  transition: color 0.3s ease;
}

.el-table .el-button:hover {
  color: #66b1ff;
}

.el-table .qr-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.dialog-box .el-dialog__header {
  background-color: #409EFF;
  color: white;
}

.dialog-footer .el-button {
  border-radius: 20px;
}

.cancel-btn {
  background-color: #f1f1f1;
  color: #333;
  transition: background-color 0.3s ease;
}

.cancel-btn:hover {
  background-color: #ddd;
}

.confirm-btn {
  background-color: #409EFF;
  color: white;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
